import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Box } from "$components";
import { getProductRelatedIPStats } from "../actions/bigscreen";
import "./style.less";

const IPChain = () => {
  const dispatch = useDispatch();
  const [tableData, setTableData] = useState([]);
  useEffect(() => {
    dispatch(getProductRelatedIPStats()).then((res) => {
      setTableData(res.payload.data.productList);
      console.log(res.payload.data.productList, "res.payload.data");
    });
  }, []);


  return (
    <Box title="知识产权链">
      <div className="ip-chain-container">
        <table className="ip-chain-table">
          <thead>
            <tr>
              <th>产品名称</th>
              <th>获得专利数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {tableData.map((item, index) => (
              <tr key={index}>
                <td>{item.productName}</td>
                <td>{item.totalCount}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Box>
  );
};

export default IPChain;
